<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自由许愿</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    {% include 'base.html' %}
</head>
<body>
    <div class="starry-bg"></div>
    <div class="wish-container" style="max-width: 700px;">
        <h1>✨我要许愿✨</h1>
        <div style="text-align: center;">
            <textarea id="custom-wish" 
                     style="width: 80%; height: 150px; padding: 1rem; 
                            border-radius: 12px; border: 1px solid #ccc; 
                            margin-bottom: 1rem; resize: none;"
                     placeholder="写下你的心愿..."></textarea>
            <br>
            <button id="submit-custom-wish" 
                    style="background-color: #ff9e9e; color: white;">
                许愿🎁
            </button>
        </div>
        <!-- 新增愿望列表容器 -->
        <div id="wishes-container" style="margin-top: 2rem;"></div>
    </div>
    {% include 'audio.html' %}
    <script src="{{ url_for('static', filename='scripts/script.js') }}"></script>
    <script>
        // 页面加载完成后显示愿望列表
        document.addEventListener('DOMContentLoaded', function() {
            displayValidWishes('all');
        });
    </script>
</body>
</html>